<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .msgBox {
      background-color: red;
    }
  </style>
</head>
<body>
<div id="function">function</div>
let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。
<script>

  console.group('function')
  console.group('函数命名约定，应遵循与变量命名约定')
  f1()

  function f1() {
    console.log('in function')
  }

  console.log(f1)
  f1()

  console.groupEnd()
  console.group('demo')
  let body = document.querySelector('body');

  let panel = document.createElement('div');
  panel.setAttribute('class', 'msgBox');
  body.appendChild(panel);

  let msg = document.createElement('p');
  msg.textContent = 'This is a message box';
  panel.appendChild(msg);

  let closeBtn = document.createElement('button');
  //textContent是dom的一个属性
  closeBtn.textContent = 'x';
  panel.appendChild(closeBtn);
  //匿名函数
  closeBtn.onclick = function () {
    panel.parentNode.removeChild(panel);
  }
  console.groupEnd()
  console.group('function dom')
  const myFunction = document.getElementById('function')
  console.log(myFunction)
  myFunction.style.color = 'red'
  console.groupEnd()
  console.group('function dom')
  for (let i = 0; i < 3; i++) {
    let i = 'abc';
    console.log(i);
  }
  const PI = 3.1415;
  console.log(PI)
  let PI1 = PI
  console.log(PI === PI1)//true
  console.log(PI1)
  //开辟新的地址，原来的地址不变
  PI1 = 100
  console.log(PI === PI1)//false
  console.log(PI)
  console.log(PI1)
  console.groupEnd()
  console.group('function dom')
  const person = {
    age: 10,
    name: 'hg'
  }
  console.log(person)
  person.age = 100
  console.log(person)
  console.groupEnd()
  console.groupEnd()
</script>
</body>
</html>
